<template>
    <div class="added">
      <div class="added-main" v-for="(item,index) in groupList" ﻿@tap="goPage(item.id)" :key="index">
        <img :src="picPre + item.cover" alt="">
        <div class="content">
          <h1>{{item.name}}</h1>
          <p class="added-count">
            <i class="iconfont iconren" style="font-size: 27rpx;color: #ffffff;"></i><span>{{item.member_num}}</span>
          </p>
        </div>
        <div class="right">
          <i class="iconfont iconshanchu" ﻿@tap.stop="deleteBtn(item.id, index)" style="font-size: 20rpx;color: #cecece;padding: 20rpx 0 20rpx 80rpx"></i>
        </div>
      </div>
      <bottoms info="您尚未加入群组" tips="快去加入吧,可以获得最新消息哟~"></bottoms>
    </div>
</template>

<script>
  import bottoms from '@/components/reachBottom/index'
  export default {
      name: "added",
      components:{
        bottoms
      },
      data() {
        let that = this;
        return {
          picPre: that.$api.picPre,
          groupList: [],
          loadingEnd: {
            moduleOne: false,
          },
          totalPage: 1,
          currentPage: 1,
          totalCount: 0
        }
      },
      methods:{
        goPage(id){
			uni.navigateTo({
				url: '/social/groupDetails?id=' + id
			})
        },
        deleteBtn(id, index){
          let that = this
          ﻿uni.showModal({
            title: '退出群组',
            content: '确认退出？',
            success (res) {
              if (res.confirm) {
                that.$ajax
            .post(that.$api.delGroup, {id: id})
            .then(() => {
              that.groupList.splice(index, 1)
              if(that.groupList.length === 0){
                that.viewLoad()
              }
            })
            .catch(err => {
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
              }
            }
          });
        },
        getList(){
          this.$ajax
            .post(this.$api.myGroup,{page: this.currentPage})
            .then(res => {
              this.groupList.push(...res.data);
              this.loadingEnd.moduleOne = true
              this.totalPage = res.total_page
              this.totalCount = res.total_count
              if(res.total_count === 0){
                this.$store.dispatch("changeIsEmpty", true);
              } else {
                this.$store.dispatch("changeIsEmpty", false);
              }
            })
            .catch(err => {
              this.loadingEnd.moduleOne = true
              ﻿uni.showToast({
                title: err,
                icon: 'none',
                duration: 2000
              })
            });
        },
        viewLoad(){
          this.currentPage = 1
          this.groupList = []
          this.$store.dispatch("changeIsMore", false);
          this.$store.dispatch("changeIsEnd", false);
          this.$store.dispatch("changeIsEmpty", false);
          this.loadingEnd = {
            moduleOne: false,
          };
          ﻿uni.showLoading({
            title: '加载中',
            mask: true
          });
          this.getList();
        },
      },
      computed:{
        hideLoading(){
          if(this.loadingEnd.moduleOne){
            setTimeout(function(){
              ﻿uni.hideLoading()
            }, 800)
          }
        }
      },
      onPullDownRefresh(){
        this.viewLoad()
        ﻿uni.stopPullDownRefresh() //停止下拉刷新
      },
      onReachBottom(){
        if(this.totalPage > this.currentPage){
          this.$store.dispatch("changeIsMore", true);
          this.$store.dispatch("changeIsEnd", false);
          this.currentPage++
          this.getList();
        } else {
          this.$store.dispatch("changeIsEnd", true);
          this.$store.dispatch("changeIsMore", false);
        }
      },
      onLoad() {
        this.viewLoad()
      }
    }
</script>

<style scoped>
.added{
  padding: 20rpx 30rpx;
  box-sizing: border-box;
}
  .added-main{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #EEEEEE;
  }
.added-main>img{
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
}
.added-main>.content{
  flex: 1;
  margin-left: 29rpx;
}
.added-main> .right{
  text-align: right;
}
.iconshanchu{
  padding: 20px 0 20px 20px;
}
.added-main>div>h1{
  font-size: 32rpx;
  color: #323232;
  font-weight: 500;
  margin-bottom: 13rpx;
}
.added-count{
  width: 98rpx;
  height: 34rpx;
  -webkit-border-radius: 10rpx;
  -moz-border-radius: 10rpx;
  border-radius: 10rpx;
  background-color: #5FC3F0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.added-count > span{
  font-size: 24rpx;
  color: #FFFFFF;
  font-weight: 500;
  margin-left:11rpx;
}
.added-count{
  font-size: 26rpx;
  color: #888888;
  padding: 3rpx;
  font-weight: 500;
}
</style>
